import React, { useState, useEffect } from "react";
import { useParams,useNavigate } from "react-router-dom";
import MyHeader from "../../components/header/MyHeader";
import api from "../../api/index";
import AntSwiper from "../../components/antSwiper/AntSwiper";
import { Tabs, Rate } from "antd-mobile";
import style from "./style.module.scss";
import classnames from "classnames";
import LoadMore from "../../components/loadMore/LoadMore";
import {useSelector} from 'react-redux'
export default function HouseDetail() {
  const params = useParams();
  const navigate = useNavigate();
  console.log(params); //{id:xxx}
  //定义容器房源信息
  const [info, setInfo] = useState({});
  //定义轮播容器
  const [banner, setBanner] = useState([]);
  //评价信息列表
  let [list, setList] = useState([]);
  //分页
  let [page, setPage] = useState(0);
  //开关
  let flag = true;
  //定义一个变量 标识收藏状态  未收藏 --显示：收藏 字段
  const [isCollect,setCollect] = useState(false);
  //获取用户信息--用户名或者是登录状态 
  const isLogin= useSelector(state=>state.user.isLogin)
  useEffect(() => {
    // localStorage.setItem('collects','["100","102","103"]')
    getData();
    //评论信息----------
    getCommitData(page);
    
    // 进入详情界面获取本地存储的id号 看当前的房源有没有被收藏----------
    let data=localStorage.getItem('collects');//[102,104]
    if(data){
     let arr = JSON.parse(data);
      console.log('-----------------------------',arr);
      if(arr.indexOf(params.id) >= 0){//当前的房源有被收藏
        setCollect(true);//修改收藏状态显示
      }
    }

  }, []);

  //房源信息---函数接受变量-----------------------------
  async function getData() {
    let res = await api.getHouseInfoo({ id: params.id });
    console.log("房源详情信息-- ", res.data);
    setBanner(res.data.banner);
    setInfo(res.data.info);
  }
  //---房源评价----------------------------------------
  async function getCommitData(page) {
    let res = await api.getCommit({ id: params.id, page });
    console.log("房源评价信息--", res.data);
    // setList(res.data.list)
    setList([...list, ...res.data.list]);
    //开关打开
    flag = true;
    //修改page
    setPage(page + 1);
  }
  
  function phone(tel) {
    //tel=12345678912
    let arr = tel.split("");
    arr.splice(3, 4, "****");
    return arr.join("");
  }

  function getCollect(){
      //1.  需要判断是否登录了  
      if(isLogin){
        var arr=[]
        let data=localStorage.getItem('collects');
        if(data){//本地有存储收藏--
           arr= JSON.parse(data)
        }
       
        if(isCollect){//已收藏  --- 收藏
            setCollect(false);
            //删除本地存储的当前房源id 
            let index = arr.indexOf(params.id);
            arr.splice(index,1)
            console.log('---arr----',arr);
           
        }else{
          //未收藏 ---已收藏
          setCollect(true);
          arr.push(params.id)
          console.log('---------------',arr);
        }
      //存储本地
      localStorage.setItem('collects',JSON.stringify(arr));
      }else{
        navigate('/login')
      }
  }

 

  return (
    <div>
      {/* 公共的顶部区域 */}
      <MyHeader>详情页</MyHeader>
      <p>房源详情信息id标识: {params.id}</p>
      {/* 轮播图 */}
      <AntSwiper arr={banner} />
      {/* 房源介绍 */}
      <div className={style.house}>
        <Tabs>
          <Tabs.Tab title="房源信息" key="1">
            <div className={style.box}>
              <div className={style.item}>
                <p className={style.red}>{info.price}</p>
                <p>租金</p>
              </div>
              <div className={style.item}>
                <p className={style.red}>{info.huxing}</p>
                <p>户型</p>
              </div>
              <div className={style.item}>
                <p className={style.red}>{info.area}</p>
                <p>面积</p>
              </div>
            </div>
            <div className={style.info}>
              <p>名称: {info.title}</p>
              <p>装修: {info.zhuangxiu}</p>
              <p>楼层: {info.floor}</p>
              <p>朝向: {info.chaoxiang}</p>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="评价信息" key="2">
            {list.map((ele, index) => {
              return (
                <div className={style.commit} key={index}>
                  <p>电话：{phone(ele.tel)}</p>
                  <div>
                    星星：{ele.star}
                    <Rate readOnly value={ele.star} />
                  </div>
                  <p>评价内容：{ele.content}</p>
                </div>
              );
            })}

            {/* 加载更多数据 */}
            <LoadMore page={page} getData={getCommitData} />
          </Tabs.Tab>
        </Tabs>
      </div>

      {/* 底部收藏 加购 */}
      <div style={{ height: "0.82rem" }}>
        <div className={style.bottom}>
          <div className={style.ele} onClick={getCollect}>
            { isCollect?'已收藏':'收藏'}
          </div>
          <div className={style.ele}>购买</div>
        </div>
      </div>
    </div>
  );
}
